<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>记录查询</title>
    <link href="<c:url value="/static/pure/pure-min.css"/>" rel="stylesheet" type="text/css"/>
    <link href="<c:url value="/static/easyui/easyui.css"/>" rel="stylesheet" type="text/css"/>
    <link href="<c:url value="/static/jqueryui/jquery-ui.min.css"/>" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="<c:url value="/static/jquery/jquery-1.9.1.min.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/static/easyui/jquery.easyui.min.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/static/jqueryui/jquery-ui.min.js"/>"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'center',title:'租+申请管理页面'">
    <%--查询表单--%>
    <form class="pure-form pure-form-stacked">
        <fieldset>
            <legend>查询条件</legend>

            <div class="pure-g">
                <div class="pure-u-1-3">
                    <label for="name">姓名</label>
                    <input id="name" name="name" type="text">
                </div>

                <div class="pure-u-1-3">
                    <label for="idNo">身份证号</label>
                    <input id="idNo" name="idNo" type="text">
                </div>

                <div class="pure-u-1-3">
                    <label for="mobileNo">手机号</label>
                    <input id="mobileNo" name="mobileNo" type="tel">
                </div>

                <div class="pure-u-1-3">
                    <label for="address">租房地址</label>
                    <input id="address" name="address" type="text">
                </div>

                <div class="pure-u-1-3">
                    <label for="paymentMethod">付款方式</label>
                    <select id="paymentMethod" name="paymentMethod" class="pure-input-1-2">
                        <option value="10">押一付三</option>
                        <option value="20">押一付二</option>
                        <option value="30">押一付六</option>
                        <option value="40">押二付二</option>
                    </select>
                </div>

                <div class="pure-u-1-3">
                    <label for="applyDate">申请日期</label>
                    <input id="applyDate" name="applyDate" type="text">
                </div>
            </div>
            <div class="pure-g">
                <div class="pure-u-1-12">
                    <input id="resetBtn" type="button" class="pure-button pure-button-primary" value="重置表单"/>
                </div>
                <div class="pure-u-1-12">
                    <input id="queryBtn" type="button" class="pure-button pure-button-primary" value="查询"/>
                </div>
            </div>
        </fieldset>
    </form>

    <%--数据grid--%>
    <table id="dg" class="easyui-datagrid" title="租+申请" style="width:100%;height:340px"
           data-options="singleSelect:true,pagination:true,url:'${ctx}/rent/findPagedList'">
        <thead>
        <tr>
            <th data-options="field:'name',width:80">姓名</th>
            <th data-options="field:'idNo',width:150">身份证号</th>
            <th data-options="field:'mobileNo',width:85,align:'right'">手机号</th>
            <th data-options="field:'rent',width:80,align:'right'">租金</th>
            <th data-options="field:'address',width:250">租房地址</th>
            <th data-options="field:'rentDate',width:70,align:'center'">交租日期</th>
            <th data-options="field:'paymentMethod',width:90,align:'center',formatter:payMethodFormatter">付款方式</th>
            <th data-options="field:'referrer',width:80,align:'center'">推荐人</th>
            <th data-options="field:'createtime',width:120,align:'center'">申请时间</th>
        </tr>
        </thead>
    </table>
</div>
<script>

    $(function(){
        $("#queryBtn").on('click',queryHandler);
        $("#resetBtn").on('click',resetHandler);

        $("#applyDate").datepicker({ dateFormat: 'yy-mm-dd' });
    });

    function queryHandler(){
        $('#dg').datagrid('load',serializeForm($("form")));
    }

    function resetHandler(){
        $('form')[0].reset();
    }

    function payMethodFormatter(value,row,index){

        if (value == '10'){
            return '押一付三';
        }else if(value == '20'){
            return '押一付二';
        }else if(value == '30'){
            return '押一付六';
        }else if(value == '40'){
            return '押二付二';
        }

        return '';
    }

    function serializeForm(form){
        var o={};
        $.each(form.serializeArray(),function(index){
            if(o[this['name']]){
                o[this['name']] = o[this['name']]+","+this['value'];
            }else{
                o[this['name']] = this['value'];
            }
        });
        return o;
    }
</script>
</body>
</html>
